<template>
  <div class="home-page">
    <!-- Banner轮播图 -->
    <div class="banner-container">
      <el-carousel height="500px">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <img :src="banner.image" :alt="banner.title" class="banner-image">
          <div class="banner-content">
            <h2 class="banner-title">{{ banner.title }}</h2>
            <p class="banner-desc">{{ banner.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 解决方案版块 -->
    <section class="solutions-section section">
      <div class="container">
        <h2 class="section-title">八大生态发展战略</h2>
        <div class="solutions-grid">
          <div class="solution-card" v-for="(solution, index) in solutions" :key="index">
            <div class="solution-icon">
              <img :src="solution.icon" :alt="solution.title">
            </div>
            <h3 class="solution-title">{{ solution.title }}</h3>
            <p class="solution-desc">{{ solution.description }}</p>
            <router-link :to="solution.link" class="solution-link" v-if="false">了解更多</router-link>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻中心版块 -->
    <section class="news-section section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">新闻中心</h2>
          <router-link to="/news" class="more-link">更多 ></router-link>
        </div>
        <div class="news-grid">
          <div class="news-card" v-for="(news, index) in newsList" :key="index">
            <div class="news-image">
              <img :src="news.image" :alt="news.title">
            </div>
            <div class="news-content">
              <div class="news-category">{{ news.category }}</div>
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-desc">{{ news.description }}</p>
              <div class="news-date">{{ news.date }}</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 科研成果版块 -->
    <section class="research-section section">
      <div class="container">
        <h2 class="section-title">科研成果</h2>
        <div class="research-grid">
          <div class="research-card" v-for="(research, index) in researchList" :key="index">
            <div class="research-icon">
              <img :src="research.icon" :alt="research.title">
            </div>
            <div class="research-content">
              <h3 class="research-title">{{ research.title }}</h3>
              <p class="research-number">{{ research.number }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作单位版块 -->
    <section class="partners-section section">
      <div class="container">
        <h2 class="section-title">合作单位</h2>
        <div class="partners-grid">
          <div class="partner-logo" v-for="(partner, index) in partners" :key="index">
            <img :src="partner.logo" :alt="partner.name">
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      banners: [
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111943983.png',
          title: '低空观光旅游',
          description: '景区空中游览一站式服务平台'
        },
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111947106.png',
          title: '航空教育培训',
          description: '筑梦蓝天，培育未来航空产业的核心力量'
        },
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111945001.png',
          title: '飞行营地建设运营',
          description: '打造天空的起点，激活低空经济新引擎'
        }
      ],
      solutions: [
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111857746.png',
          title: '低空观光旅游',
          description: '提供直升机、eVTOL等低空载具的立体观光体验，覆盖城市地标、自然景区',
          link: '/solutions/digital-twin'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111859117.jpeg',
          title: '低空+科普研学',
          description: '结合航空科技与教育，提供直升机/eVTOL体验、飞行原理讲解及模拟驾驶',
          link: '/solutions/urban-transport'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111901485.jpeg',
          title: '低空营地建设',
          description: '承接景区低空营地建设，配备直升机起降坪、航空主题帐篷及载人飞行器',
          link: '/solutions/major-project'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111902662.jpeg',
          title: '低空应急救援',
          description: '依托直升机/eVTOL构建快速响应救援网络，覆盖景区、水域等复杂地形，提供医疗转运、物资投送等服务',
          link: '/solutions/infrastructure'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111903448.png',
          title: '飞机合作商家',
          description: '合肥零重力航空科技，专注eVTOL/直升机合作，提供飞行体验、技术培训及定制化空中服务解决方案',
          link: '/solutions/infrastructure'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111904747.png',
          title: '空中物流',
          description: '城域无人机物流配送，30分钟极速达，覆盖商圈/社区',
          link: '/solutions/digital-city'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111905688.png',
          title: '低空金融保险',
          description: 'eVTOL/无人机全险，覆盖故障维修、部件更换、年度保养',
          link: '/solutions/digital-city'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111905877.png',
          title: '低空出行',
          description: '一键呼叫eVTOL空中快车，城市点对点直飞',
          link: '/solutions/digital-city'
        }
      ],
      newsList: [
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111907375.png',
          category: '公司新闻',
          title: '中空领航与帛莱恩航空共拓低空产业新篇章',
          description: '2025年4月21日，中空领航航空运营发展有限公司与帛莱恩航空在合肥正式签署合作协议。中空领航创始人李穆穆与帛莱恩航空总经理万建雄出席签约仪式，标志着双方在低空运营、市场拓展、产业资源整合及航空器销售等领域开启深度合作。',
          date: '2025-04-21'
        },
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111910113.png',
          category: '公司新闻',
          title: '热烈庆祝苏州分公司正式成立！深耕低空经济，共绘"天空之城"蓝图！',
          description: '2025年，低空经济迎来爆发式增长新纪元！值此产业腾飞之际，中空领航航空运营公司苏州分公司正式成立！作为长三角低空经济的重要布局，苏州分公司将依托总公司的技术优势与资源网络，协同苏州本地产业生态，加速推进无人机物流、低空交通、智慧巡检等场景落地，为苏州打造"低空经济示范区"注入强劲动能。',
          date: '2025-05-06'
        },
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111912103.png',
          category: '公司新闻',
          title: '【重磅官宣】西安分公司正式成立！赋能低空经济，共拓西部新蓝海',
          description: '中空领航航空运营公司（以下简称"中空领航"）正式宣布西安分公司成立！作为低空经济领域的新锐力量，西安分公司的落地标志着中空领航在"全国化布局、区域化深耕"战略中迈出关键一步，未来将依托西安的航空产业优势与政策资源，加速低空经济创新应用，为西部低空产业生态注入新动能。',
          date: '2025-05-06'
        },
        {
          image: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111914946.png',
          category: '公司新闻',
          title: '亚太旅游联合会（APTO)、江苏分会会长——张长江，协同多位商界领袖，莅临中空领航总部考察指导',
          description: '2025年5月，亚太旅游联合会(APTO)、江苏分会会长——张长江先生，协同多位商界领袖，莅临中空领航总部进行深度考察调研，中空领航创始人汤总、穆总陪同考察，共探"低空经济"赋能旅游新未来！',
          date: '2025-05-30'
        }
      ],
      researchList: [
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111949153.png',
          title: '知识产权',
          number: '专利 280+'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111951939.png',
          title: '科研项目',
          number: '国家级项目 15+'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111950245.png',
          title: '科研成果',
          number: '省部级奖项 25+'
        },
        {
          icon: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111951314.png',
          title: '科研载体',
          number: '实验室 10+'
        }
      ],
      partners: [
        {
          logo: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111916427.png',
          name: '合肥零重力飞机工业有限公司'
        },
        {
          logo: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111918467.png',
          name: '合肥帛莱恩航空科技有限公司'
        },
        {
          logo: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111916427.png',
          name: '合肥零重力飞机工业有限公司'
        },
        {
          logo: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111918467.png',
          name: '合肥帛莱恩航空科技有限公司'
        },{
          logo: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111916427.png',
          name: '合肥零重力飞机工业有限公司'
        },
        {
          logo: 'https://gitee.com/xiaweifeng/picgo/raw/master/images/202506111918467.png',
          name: '合肥帛莱恩航空科技有限公司'
        },
      ]
    }
  }
}
</script>

<style scoped>
.home-page {
  padding-bottom: 50px;
}

.banner-container {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 50px;
}

.banner-container :deep(.el-carousel),
.banner-container :deep(.el-carousel__container) {
  width: 100%;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
  max-width: 500px;
}

.banner-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 15px;
}

.banner-desc {
  font-size: 20px;
}

.section {
  padding: 50px 0;
}

.section-title {
  font-size: 32px;
  color: var(--primary-color);
  text-align: center;
  position: relative;
  margin-bottom: 40px;
  font-weight: bold;
}

.section-title:after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background-color: var(--secondary-color);
  margin: 15px auto 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.more-link {
  color: var(--primary-color);
  font-size: 16px;
  transition: color 0.3s;
}

.more-link:hover {
  color: var(--secondary-color);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.solution-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.solution-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.solution-icon img {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  object-fit: contain;
  border-radius: 5px;
}

.solution-title {
  font-size: 20px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.solution-desc {
  color: #666;
  margin-bottom: 20px;
  height: 60px;
}

.solution-link {
  color: var(--secondary-color);
  font-weight: bold;
  transition: color 0.3s;
}

.solution-link:hover {
  color: var(--primary-color);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.news-card {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.news-image {
  width: 200px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.news-content {
  padding: 20px;
  flex: 1;
  position: relative;
}

.news-category {
  color: var(--secondary-color);
  font-size: 14px;
  margin-bottom: 10px;
}

.news-title {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--text-color);
}

.news-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.news-date {
  color: #999;
  font-size: 12px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.research-section {
  background-color: var(--light-gray);
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.research-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.research-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.research-icon img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.research-title {
  font-size: 18px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.research-number {
  color: var(--secondary-color);
  font-size: 16px;
  font-weight: bold;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

.partner-logo {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.partner-logo:hover {
  transform: scale(1.05);
}

.partner-logo img {
  max-width: 100%;
  max-height: 60px;
  filter: grayscale(0);
  opacity: 1;
  transition: transform 0.3s;
}

.partner-logo:hover img {
  transform: scale(1.05);
}

@media (max-width: 1200px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .research-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .banner-container {
    margin-left: -40px;
    margin-right: -40px;
    width: calc(100% + 80px);
    left: 0;
    transform: none;
  }
  
  .banner-content {
    max-width: 70%;
  }
  
  .banner-title {
    font-size: 36px;
  }
  
  .banner-desc {
    font-size: 18px;
  }

  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .research-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .banner-container {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }
  
  .banner-content {
    left: 5%;
  }
  
  .section {
    padding: 40px 0;
  }
  
  .section-title {
    font-size: 28px;
    margin-bottom: 30px;
  }
  
  .section-title:after {
    margin: 10px auto 0;
  }
  
  .banner-title {
    font-size: 28px;
    margin-bottom: 10px;
  }
  
  .banner-desc {
    font-size: 16px;
  }
  
  .solutions-grid,
  .news-grid,
  .research-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  
  .solution-card {
    padding: 20px;
  }
  
  .solution-title {
    font-size: 18px;
  }
  
  .solution-desc {
    font-size: 14px;
    height: auto;
  }
  
  .news-card {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    height: 180px;
  }
  
  .news-content {
    padding: 15px;
  }
  
  .news-title {
    font-size: 16px;
  }
  
  .solution-icon img {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .banner-container {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px);
  }
  
  .banner-container :deep(.el-carousel) {
    height: 300px !important;
  }
  
  .banner-container :deep(.el-carousel__container) {
    height: 300px !important;
  }
  
  .banner-content {
    max-width: 90%;
  }
  
  .banner-title {
    font-size: 24px;
  }
  
  .banner-desc {
    font-size: 14px;
  }
  
  .section {
    padding: 30px 0;
  }
  
  .section-title {
    font-size: 24px;
  }
  
  .solution-icon img {
    width: 50px;
    height: 50px;
  }
  
  .solution-icon :deep(.el-icon) {
    font-size: 30px;
  }
  
  .news-image {
    height: 150px;
  }
  
  .news-desc {
    font-size: 13px;
    margin-bottom: 15px;
  }
  
  .partners-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .partner-logo {
    padding: 10px;
  }
  
  .partner-logo img {
    max-height: 40px;
  }
}
</style> 